<template>
    <el-dialog v-model="open" title="ShippingCost" width="23%" align="center" style="position: relative;" draggable>
        <span style="position: absolute;left:4%;top:30%">Total Amount:${{ subTotal }}</span>
        <div style="display: flex;position: absolute;top:50%;left:4%">
            <p>
                <span>ShippingCost:</span>
                <el-input v-model="ShippingCost" style="width: 120px;margin-left:4px;" />
            </p>
        </div>
        <template #footer>

            <span class="dialog-footer">
                <el-button type="primary" @click="shippingCostSave">Save</el-button>
                <el-button @click="closeWindow">Cancel</el-button>
            </span>
        </template>
    </el-dialog>
</template>
  
<script  setup>
import { ref } from 'vue'
const open = ref(false)
const ShippingCost = ref('')

const props = defineProps({
    subTotal: Number
})
const emits = defineEmits(['shippingCostSave'])

const dialogopen = () => {
    open.value = true
}
const closeWindow = () => {
    open.value = false
}
const shippingCostSave = () => {
    emits('shippingCostSave', 'shipping_cost')
}
defineExpose(
    {
        open,
        ShippingCost,
        dialogopen
    }
)
</script>
<style>
.el-dialog__footer {
    margin-top: 30px;
}
</style>